<!--
 * @Author: Bo Cai
 * @Mail: caibo0520@qq.com
 * @Date: 2021-11-20 14:42:29
 * @LastEditors: Bo Cai
 * @LastEditTime: 2021-12-26 01:37:18
-->
<template>
  <div class="sign-up-container">
    <section class="container">
      <div>
        <header class="comm-title">
          <h2 class="fl tac">
            <span class="c-333">基本信息</span>
          </h2>
        </header>
        <el-form ref="form" :model="user_info">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item
                label="头像"
                label-width="50px"
                class="input-prepend restyle"
                prop="avatar"
                :rules="[
                {
                  required: true,
                  message: '请上传您的头像',
                  trigger: 'blur',
                },
              ]"
              >
                <div>
                  <el-upload
                    class="avatar-uploader"
                    :action="baseUrl + '/api/qingdong/ali_oss/file/upload?save_dir=cover'"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img
                      v-if="user_info.avatar"
                      :src="user_info.avatar"
                      class="avatar"
                    />
                    <el-icon v-else class="el-icon-plus avatar-uploader-icon"
                    >
                      <plus
                      />
                    </el-icon>
                  </el-upload>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                label="昵称"
                label-width="50px"
                class="input-prepend restyle"
                prop="username"
                :rules="[
                {
                  required: true,
                  message: '请输入你的昵称',
                  trigger: 'blur',
                },
              ]"
              >
                <el-input type="text" v-model="user_info.username"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item
                label="性别"
                label-width="50px"
                class="input-prepend restyle"
                prop="sex"
                :rules="[
                {
                  required: true,
                  message: '请输入你的性别',
                  trigger: 'blur',
                },
              ]"
              >
                <el-select v-model="user_info.sex" placeholder="请选择性别">
                  <el-option label="保密" :value="0"></el-option>
                  <el-option label="男" :value="1"></el-option>
                  <el-option label="女" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item
                label="出生日期"
                label-width="80px"
                class="input-prepend restyle"
                prop="birthday"
                :rules="[
                {
                  required: true,
                  message: '请输入你的出生日期',
                  trigger: 'blur',
                },
              ]"
              >
                <el-input type="date" v-model="user_info.birthday"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item
                label="个人简介"
                label-width="80px"
                class="input-prepend restyle"
                prop="personal_profile"
                :rules="[
                {
                  required: true,
                  message: '请输入您的个人简介',
                  trigger: 'blur',
                },
              ]"
              >
                <el-input
                  type="textarea"
                  v-model="user_info.personal_profile"
                  rows="3"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <div class="center submit-btn">
                <el-button type="primary" @click="update_user_info"
                >更改个人信息
                </el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-divider />
      <div>
        <header class="comm-title">
          <el-row>
            <h2 class="fl tac">
              <span class="c-333">账户邮箱</span>
            </h2>
          </el-row>
        </header>
        <el-form>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item
                label="邮箱"
                label-width="50px"
                class="input-prepend restyle no-radius"
                prop="email"
                :rules="[
                {
                  required: true,
                  message: '请输入邮箱',
                  trigger: 'blur',
                },
                { validator: checkMail, trigger: 'blur' },
              ]"
              >
                <el-input type="text" v-model="user_info.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                class="input-prepend restyle no-radius"
                prop="code"
                :rules="[
            {
              required: true,
              message: '请输入验证码',
              trigger: 'blur',
            },
          ]"
              >
                <div
                  style="width: 100%; display: block; float: left; position: relative"
                >
                  <el-input type="text" placeholder="验证码" v-model="email_verification_code"/>
                </div>
                <div
                  class="btn"
                  style="position: absolute; right: 8px; width: 40%"
                >
                  <a
                    href="javascript:"
                    type="button"
                    @click="getCodeFun()"
                    :value="codeTest"
                  >{{ codeTest }}</a
                  >
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <div class="center submit-btn">
                <el-button type="primary" @click="update_email"
                >更换邮箱
                </el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-divider />
      <div>
        <header class="comm-title">
          <el-row>
            <h2 class="fl tac">
              <span class="c-333">高校信息</span>
            </h2>
          </el-row>
        </header>
        <el-form>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item
                label="大学"
                label-width="50px"
                class="input-prepend restyle"
                prop="campus_name"
                :rules="[
                {
                  required: true,
                  message: '请输入您的大学名称',
                  trigger: 'blur',
                },
              ]"
              >
                <el-input type="text" v-model="campus_identity.campus_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                label="专业"
                label-width="50px"
                class="input-prepend restyle"
                prop="major"
                :rules="[
                {
                  required: true,
                  message: '请输入您的专业',
                  trigger: 'blur',
                },
              ]"
              >
                <el-input type="text" v-model="campus_identity.major"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                label="班级"
                label-width="50px"
                class="input-prepend restyle"
                prop="campus_name"
                :rules="[
                {
                  required: true,
                  message: '请输入您的班级',
                  trigger: 'blur',
                },
              ]"
              >
                <el-input type="text" v-model="campus_identity.class_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item
                label="入学日期"
                label-width="80px"
                class="input-prepend restyle"
                prop="birthday"
                :rules="[
                {
                  required: true,
                  message: '请输入你的入学日期',
                  trigger: 'blur',
                },
              ]"
              >
                <el-input type="date" v-model="campus_identity.admission_date"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <div class="center submit-btn">
                <el-button type="primary" @click="submit_campus_identity"
                >提交
                </el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </section>
  </div>
</template>

<script>
import loginApi from '@/api/login'
import user_center_api from '@/api/ucenter'

export default {
  layout: 'user_center_layout',
  data () {
    return {
      user_info: {
        birthday: '',
        avatar: '',
        email: '',
        username: '',
        personal_profile: '',
        sex: '',
      },
      campus_identity: {
        campus_name: '',
        major: '',
        class_name: '',
        admission_date: '',
      },
      email_verification_code: '',
      second: 120, //倒计时间
      codeTest: '获取验证码',
      baseUrl: '',
    }
  },
  created () {
    this.init_user_info()
    this.baseUrl = process.env.baseUrl
  },
  methods: {
    update_user_info () {
      user_center_api
        .updateById(this.user_info)
        .then((response) => {
          if (response.data.success) {
            this.get_user_info()
            this.$message.success('个人信息修改成功，头像将在刷新页面后生效！')
          } else {
            this.$message.error('个人信息修改失败：' + response.data.error.message)
          }
        })
        .catch((error) => {
          this.$message.error('个人信息修改失败：' + error)
        })
    },
    update_email () {
      if (!this.email_verification_code) {
        this.$message.error('请输入先获取验证码并输入！')
      } else {
        user_center_api.update_email(this.user_info.email, this.email_verification_code).then((response) => {
          if (response.data.success) {
            this.get_user_info()
            this.$message.success('账户邮箱修改成功！')
          } else {
            this.$message.error('账户邮箱修改失败：' + response.data.error.message)
          }
        })
      }
    },
    submit_campus_identity () {
      user_center_api.submit_campus_identity(this.campus_identity).then((response) => {
        if (response.data.success) {
          this.$message.success('高校信息提交成功！')
        } else {
          this.$message.error('高校信息提交失败：' + response.data.error.message)
        }
      }).catch((error) => {
        this.$message.error('高校信息提交失败：' + error)
      })
    },
    init_user_info () {
      let user_info = this.$cookies.get('qingdong_user')
      if (user_info.campus_identity) {
        this.campus_identity = user_info.campus_identity
      }
      this.user_info = user_info
    },
    get_user_info () {
      loginApi.getLoginInfo().then((response) => {
        this.$cookies.set('qingdong_user', response.data.content.user_info, {
          domain: 'localhost',
        })
      })
    },
    handleAvatarSuccess (response, file) {
      if (response.success) {
        this.user_info.avatar = response.content.url
        this.$message.success('头像上传成功！')
      } else {
        this.$message.error('头像上传失败：' + response.error.message)
      }
    },
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Avatar picture size can not exceed 2MB!')
      }
      return isLt2M
    },
    timeDown () {
      this.codeTest = this.second
      let result = setInterval(() => {
        --this.codeTest
        if (this.codeTest < 1) {
          clearInterval(result)
          this.second = 120
          this.codeTest = '获取验证码'
        }
      }, 1000)
    },
    getCodeFun () {
      user_center_api.sendVerificationCode(this.user_info.email).then((response) => {
        if (response.data.success) {
          //调用倒计时的方法
          this.timeDown()
        } else {
          this.$message({
            type: 'error',
            message: response.data.error.message,
          })
        }
      })
    },
    // 校验邮箱
    checkMail (rule, value, callback) {
      //debugger
      if (
        !/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(
          value
        )
      ) {
        return callback(new Error('邮箱格式不正确'))
      }
      return callback()
    },
  },
  filters: {
    numFilter (value) {
      let realVal = ''
      if (!isNaN(value) && value !== '') {
        // 截取当前数据到小数点后两位
        realVal = parseFloat(value).toFixed(2)
      } else {
        realVal = '--'
      }
      return realVal
    },
  },
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  text-align: center;
}

.avatar-uploader-icon svg {
  margin-top: 35px; /* (178px - 28px) / 2 - 1px */
}

.avatar {
  width: 134px;
  height: 137px;
  display: block;
}

.center {
  text-align: center;
}

.el-col {
  border-radius: 4px;
}
</style>
